<!DOCTYPE html>
<html>
<head>
	<title>内置节点指令</title>
	<style type="text/css" media="screen">
		.red{
			color: red;
		}

		.even{
			color: gray;
		}

		.odd{
			color: blue;
		}
	</style>
</head>
<body>
	<div ng-app="app">
		<div ng-controller="firstController">
			<p>{{1 + 1}}</p>
			<p ng-bind="1+1"></p>
			<p ng:bind="1+2"></p>
			<p data-ng-bind="1+3"></p>

			<!-- 必须写上{{}} -->
			<p ng-bind-template="{{1+1}}"></p>

			<table ng-class="{red:status1}" ng-init="cities = ['上海','北京','苏州','南京']">
				<thead>
					<tr>
						<th>元素</th>
						<th>索引</th>
						<th>头元素</th>
						<th>非头非尾元素</th>
						<th>尾元素</th>
					</tr>
				</thead>

				<tbody>
					<!-- ng-class-even，ng-class-odd的值需要加上引号 -->
					<tr ng-repeat="city in cities" ng-class-even="'even'" ng-class-odd="'odd'">
						<td>{{city}}</td>
						<td>{{$index}}</td>
						<td>{{$first}}</td>
						<td>{{$middle}}</td>
						<td>{{$last}}</td>
					</tr>
				</tbody>
			</table>

			<div ng-include="'other.html'" ></div>
			<!-- 同上 -->
			<div ng-include src="'other.html'" ></div>

			<hr/>
			<button ng-click="status1 = !status1">切换状态</button>
			{{status1}}

			<hr/>
			<button ng-click="changeStatus($event)">切换状态为:{{!status2}}</button>
			{{status2}}

			<hr />

			<!-- 在有短杠的属性上需要加上引号或者使用驼峰命名法 -->
			<div ng-style="{color:'red', backgroundColor:'blue'}">
				aaaa
			</div>

			<!-- 如果status1为真，则显示，否则隐藏hide -->
			<div ng-style="defaultStyle" ng-show="status1">
				bbbb
			</div>

			<!-- ng-switch切换 -->
			<ul ng-switch on="status2">
				<li ng-switch-when="true">
					真
				</li>
				<li ng-switch-when="false">
					假
				</li>
			</ul>

			<img ng-src="{{src}}">
			<img ng-href="{{src}}">

			<!-- ng-if如果为条件为真，则显示，同ng-show/ng-hide -->
			<div ng-if="status1">
				status1为真
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../angular/angular-1.6.5.min.js"></script>
	<script type="text/javascript" src="app/index.js"></script>
</body>
</html>